html{
    box-sizing: border-box;
    /*Para cuando agreguemos un width a un elemento y luego un padding, este no modifique su tamaño*/
    font-size: 62.5%; /*Un rem = 10px*/
    /*
    Añadir el 62.5% al font-size en la etiqueta html ayuda a que
    se pueda calcular con mayor precision rl tamaño de los rems, siendo 1
    el equivalente a 10px
    */
}

*, *:before, *:after{
    box-sizing: inherit;
}

/*Globales*/
a{
    text-decoration: none;
    color: black;
}

.contenedor{
    max-width: 120rem;
    margin: 0 auto;
}

img{
    max-width: 100%;
    display: block;
}

body{
    font-family: 'Raleway', sans-serif;
    font-size: 1.6rem;
    line-height: 2;
}

h1, h2, h3{
    font-family: 'Playfair Display', serif;
    margin: 0 0 2rem 0;
}

h1{
    font-size: 3.8rem;
}

@media (min-width: 768px){ 
    h1{
        font-size: 5rem;
    }
}

h2{
    font-size: 3.2rem;
}

@media (min-width: 768px){ 
    h2{
        font-size: 4rem;
    }
}

h3{
    font-size: 2.4rem;
}

@media (min-width: 768px){ 
    h3{
        font-size: 3rem;
    }
}



/*Utilidades*/
.text-center{
    text-align: center;
}

.max-width-30{
    max-width: 30rem;
}


.btn{
    color: #fff;
    background-color: #8cbc00;
    display: block;
    text-transform: uppercase;
    font-weight: 900;
    padding: 1rem;
    text-align: center;
    border: none;
    width: 100%
}

.btn:hover{
    background-color: #769c02;
    transition: background-color .3s ease-out;
    cursor: pointer;
}

@media (min-width: 768px){ 
    .btn{
        width: auto;
    }
}

/**Header y Navegacion**/
.nombre-sitio span{
    color:#037BC0;
}

.contenedor-linea-superior{
    border-top: 0.1rem solid #e1e1e1;
}

.nombre-sitio{
    margin-top: 5rem;
    text-align: center;
}

.nav-principal{ 
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*atajos:
    border: ancho tipo-de-border color-de-border
    margin y padding: margin-top margin-right margin-bottom margin-left
    */
}

@media (min-width: 768px){ 
    .nav-principal{
        justify-content: space-between;
        flex-direction: row;
    }
}

.hero{
    background-image: url("../images/principal.jpg");
    background-repeat: no-repeat;/*Para que la imagen no se repita a lo ancho*/
    background-size: cover; /*Para que tome todo el espacio disponible*/
    background-position: center center;/*Par mover y modificar la posicion del contenido de la clase Hero*/
    height: 25rem;
}

@media (min-width: 768px){
    .hero{
        height: 55rem;
    } 
}

/***Categorias***/
.categorias{
    padding: 5rem 0;
}

.categoria img{
    width: 100%;
}
.categoria{
    margin-bottom: 2rem;
}
@media (min-width: 768px){ 
    .categoria{
        margin-bottom: 0;
    }
}
.categoria a{
    text-align: center;
    display: block;
    padding: 2rem;
    border-bottom-right-radius: 1.5rem;
    font-size: 2rem;
}

.categoria a:hover{
    background-color: #037bc0;
    color: #ffffff;
    font-weight: bold;
}

@media (min-width: 768px){ 
    .listado-categorias{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap:2rem; /*Sepracion entre elementos*/
    }   
}

/** Box Model 
.sobre-nosotros{
    background-color: red;
    width: 200px;
    padding: 25px;
    box-sizing: border-box;
}


si quisiera elegir el primer elemento de una lista
usaria los siguiente pseudo selectores

nav a:first-child{}

nav a:first-of-type{}

nav a:nth-child(1) aqui elijo segun el numero posicional

Si quisiera el ultimo

nav a:last-child{}

nav a:last-of-type{}
*/

/*Especificidad */

/*Bloque nosotros*/
.sobre-nosotros{
    background-image: linear-gradient(to bottom, transparent 50%,
    #037bc0 50%, #037bc0 100%), url("../images/nosotros.jpg");
    /*Degredado lineal
        La primera parte indicia hacia donde se movera
        La segunda parte se planeta como se realizara el degradado
    */
    background-repeat: no-repeat;
    background-size: 100%,/*linear gradient*/ 70rem /*imagen*/;
    background-position: center, top left;
}


@media (min-width: 768px){ 
    .sobre-nosotros{
        background-image: linear-gradient(to right, transparent 50%,
        #037bc0 50%, #037bc0 100%), url("../images/nosotros.jpg");
        /*Degredado lineal
            La primera parte indicia hacia donde se movera
            La segunda parte se planeta como se realizara el degradado
        */
        padding: 10rem 0;
        background-size: 100%,/*linear gradient*/ 160rem /*imagen*/;
        background-position: left center;
    }
}

/*Sobre Nosotros en Flexbox*/
.sobre-nosotros-grid{
    display: grid;
    grid-template-rows: repeat(2,1fr);
}

@media (min-width: 768px){ 
    .sobre-nosotros-grid{
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: unset;
        gap: 10rem;
    }
}


.texto-nosotros{
    grid-row: 2/3;/*Ancho del elemento*/
    color: #fff;
    padding: 5rem;
}

@media (min-width: 768px){ 
    .texto-nosotros{
        grid-column: 2/3;/*Ancho del elemento*/
    }
}

/*
Sobre Nosotros en Grid
.sobre-nosotros-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 8rem;
    En CSS Grid se usa mas el gap que el padding
}
.texto-nosotros{
    grid-column: 2 / 3;
    color: #fff;
}
*/


/*Listado de productos*/

.contenido-principal{
    padding-top: 5rem;
}
@media (min-width: 768px){ 
    .listado-productos{
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /*column-gap: 2rem;
        row-gap: 2rem;*/
        gap: 2rem;
        padding-bottom: 5rem;
    }
    
    .producto:nth-child(1){
        grid-column: 1 / 7;
        display: grid;
        grid-template-columns: 3fr 1fr;
    }
    
    .producto:nth-child(1) img{
        height: 43rem;
        width: 100%;
        object-fit: cover;
    }
    
    
    .producto:nth-child(2){
        grid-column: 1 / 4;
    }
    
    .producto:nth-child(2) img,
    .producto:nth-child(3) img{
        height: 30rem;
        width: 100%;
        object-fit: cover;
    }
    
    
    .producto:nth-child(3){
        grid-column: 4 / 7;
    }
    
    .producto:nth-child(4){
        grid-column: 1 / 3;
    }
    
    .producto:nth-child(5){
        grid-column: 3 / 5;
    }
    
    .producto:nth-child(6){
        grid-column: 5 / 7;
    }
    
}

.producto{
    background-color: #037bc0;
    margin-bottom: 2rem;
}

@media (min-width: 768px){
    .producto{
        margin-bottom: 0;
    }
}

.producto:last-of-type{
    margin-bottom: 0;
}

.texto-producto{
    text-align: center;
    color:#fff;
    padding: 2rem;
}

.texto-producto h3{
    margin: 0;
}

.texto-producto p{
    margin: 0 0 .5rem 0;
}

.texto-producto .precio{
    font-size: 2.8rem;
    font-weight: 900;
}



/*.producto img{
    transition: transform .3s ease-out;
}

.producto img:hover{
    transform: scale(.8);
}*/

.site-footer{
    padding-top: 5rem;
    display: grid;
    grid-template-rows: repeat(3,1fr);
    gap: 2rem;
}

.navegacion{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.copyright{
    padding-top: 5rem;
    text-align: center;
}

@media (min-width: 768px){ 
    .site-footer{
        padding-top: 5rem;
        display: grid;
        grid-template-rows: unset;
        grid-template-columns: repeat(3,1fr);
        gap: 2rem;
    }
}
    .site-footer p{
        display: block;
    }
    
    .navegacion{
        display: grid;
    }
    
    .copyright{
        padding-top: 5rem;
        text-align: center;
    }
    
    .contenido-nosotros{
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
        gap: 4rem;
        margin-bottom: 5rem;
    }
    
    .informacion-nosotros{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5rem;
        font-size: 2rem;
    }

    @media (min-width: 768px){ 
        .informacion-nosotros{
            padding: 0;
    }
    }
    /*BLOG*/

    
    
    

    @media (min-width: 768px){ 
        .contenedor-blog{
            display: grid;
            grid-template-columns: 2fr 1fr;
            column-gap: 4rem;
        }
        
        .entrada{
            border-bottom: 2px solid #e1e1e1e1;
            padding-bottom: 4rem;
            margin-bottom: 2rem;
        }
        
        .entrada:last-of-type{
            /*Para eliminar el borde en el ultimo elemento de la clase entrada*/
            border: none;
        }
        
        .entrada-meta{
            display:flex;
            justify-content: space-between;
        }
        
        .entrada-meta p{
            font-weight: 700;
            justify-content: center;
        }
        
        .entrada-meta span{
            color: #037BC0;
        }
        
        .contenido-entrada-blog{
            width: 60rem;
            margin: 0 auto;
        }
    }


/*Galeria*/
.galeria{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
    list-style: none;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (min-width: 768px){ 
    .galeria{
        grid-template-columns: repeat(3, 1fr);
    }
}
.galeria img{
    width: 40rem;
    height: 40rem;
    object-fit: cover;
}

/*Formulario*/

.formulario{
    max-width:60rem;
    margin: 0 auto;
    margin-bottom: 5rem;
}

.formulario fieldset{
    border: 1px solid black;
    margin-bottom: 2rem;
}

.formulario legend{
    background-color: #005485;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1rem;
    margin-bottom: 4rem;
}

.campo{
    display: flex;
    margin-bottom: 2rem;
}

.campo label{
    flex-basis: 10rem;
}

/*.campo .input{
    flex: 1;
}*/

/*Selector de atríbutos*/
.campo input:not([type="radio"]),
.campo textarea,
.campo select
{
    flex: 1;
    border: 1px solid #e1e1e1;
    padding: 1rem;
}